<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax&json</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
<div class="addBrand-container" id="food-add-app">
    <div class="container">
        <el-select v-model="prov" placeholder="请选择省份" @change="selectCities">
            <el-option
                    v-for="item in provinces"
                    :label="item.pname"
                    :value="item.pid">
            </el-option>
        </el-select>
        <el-select v-model="city" placeholder="请选择城市">
            <el-option
                    v-for="item in cities"
                    :label="item.cname"
                    :value="item.cid">
            </el-option>
        </el-select>
		<el-button type="success" @click="save">保存</el-button>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/index.js"></script>
<script>
    new Vue({
        el: '#food-add-app',
        data: {
            prov:'',
            provinces:[],
            city:'',
            cities:[]
        },
        methods: {
            init(){
                //查询所有省份
                axios.get("/addr/findAllProvices").then(resp=>{
                    //resp.data 就是返回的数据
                    //resp.status  响应状态码
                    console.log(resp.data);

                    this.provinces = resp.data;
                });
            },
            selectCities(){
                //alert(this.prov);
                //查询指定省份下的城市
                axios.get("/addr/findCitiesByPid?pid="+this.prov).then(resp=>{
                    this.cities = resp.data;
                });
            },
            save(){
                //发送post请求完成保存
                axios.post("/addr/save",{"pid":this.prov,"cid":this.city}).then(resp=>{
                    alert(resp.data);
                })
            }
        },
        created(){
            this.init();
        }
    })
</script>
</body>
</html>